<template>
    <el-container>
        <el-header>
            <el-row>
                <el-col class="logo" :span="7">
                    <img alt="logo" src="@/assets/logo.png">
                </el-col>
                <el-col class="title" :span="10">
                    <div>XXXX公司=={{ t('el.i18n.order_doing') }}</div>
                    <div>{{ t('el.i18n.demo2') }}</div>
                </el-col>
                <el-col class="info" :span="3" :offset="4">

            <span>
                <el-badge :value="200" :max="99" class="msg">
                    <el-icon :size="30">
                        <bell-filled/>
                    </el-icon>
                </el-badge>
            </span>
                    <span>
                <el-dropdown @command="changeLanguage">
                    <span class="el-dropdown-link">
                        <b>简体中文</b><i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item icon="el-icon-circle-plus" command="zhCn">简体中文</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-circle-plus-outline" command="ja">日本语</el-dropdown-item>
                            <el-dropdown-item icon="el-icon-circle-check" command="en">English</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </span>
                    <span>
                <el-icon :size="30">
                    <avatar/>
                </el-icon>
                张三
            </span>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside :class="isCollapse?'collapse':''">
                <el-menu
                    :default-active="1"
                    :collapse="isCollapse"
                    :router="true"
                    @open="handleOpen"
                    @close="handleClose"
                    :collapse-transition="true">


                    <template v-for="m in menus[0]">
                        <ElSubMenu v-if="m.children&& m.children.length">
                            <template #title>
                                <i class="el-icon-location"></i>
                                <span>{{ m.meta.title }}</span>
                            </template>
                            <template v-for="sm in m.children">
                                <ElMenuItem :index="sm.path" v-if="sm.meta.type===0">
                                    {{ sm.meta.title }}
                                </ElMenuItem>
                            </template>
                        </ElSubMenu>

                        <ElMenuItem index="/main/index" v-else>
                            <i class="el-icon-menu"></i>
                            <template #title>
                                <router-link to="/main/index" title="首页">{{ m.meta.title }}</router-link>
                            </template>

                        </ElMenuItem>

                    </template>


                </el-menu>
                <button class="handler" @click="handleCollapse">|||</button>
            </el-aside>
            <el-main class="content">
                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script lang="ts">
import {defineComponent, inject, ref} from 'vue'
import ElMenu from "element-plus";
import ElDropdown from "element-plus";
import ElBadge from "element-plus";
import ElIcon from "element-plus";
import ElContainer from "element-plus";
import ElConfigProvider, {
    ElAside,
    ElCol,
    ElDropdownItem,
    ElDropdownMenu,
    ElHeader,
    ElMain,
    ElMenuItem,
    ElMenuItemGroup,
    ElRadioButton,
    ElRadioGroup,
    ElRow,
    ElSubMenu,
    useLocaleInject
} from "element-plus";
import {Avatar, BellFilled} from "@element-plus/icons";
import {useRouter} from "vue-router";
import Base from "@/components/Base.vue";

export default defineComponent({
    extends: Base,
    components: {

        'el-container': ElContainer,
        'el-header': ElHeader,
        'el-aside': ElAside,
        'el-main': ElMain,
        'el-row': ElRow,
        'el-col': ElCol,
        'el-menu': ElMenu,
        'el-sub-menu': ElSubMenu,
        'el-menu-item-group': ElMenuItemGroup,
        'el-menu-item': ElMenuItem,
        'el-dropdown': ElDropdown,
        'el-dropdown-menu': ElDropdownMenu,
        'el-dropdown-item': ElDropdownItem,
        'el-badge': ElBadge,
        'el-icon': ElIcon,
        'bell-filled': BellFilled,
        'avatar': Avatar,
        'el-radio-group': ElRadioGroup,
        'el-radio-button': ElRadioButton,
        'el-config-provider': ElConfigProvider

    },
    setup() {
        const isCollapse = ref(false)
        const handleOpen = (key: any, keyPath: any) => {
            console.log(key, keyPath)
        }
        const handleClose = (key: any, keyPath: any) => {
            console.log(key, keyPath)


        }

        const {t} = useLocaleInject()

        const router = useRouter()

        const menus = ref(router.options.routes.filter(v => v.name == 'layout').map(m => m.children))

        console.info('>>>menus>===', menus)

        const changeLanguage = inject('$changeLanguage')

        const goto = () => {
            router.push({
                path: "/domain/index"
            })
        }

        return {
            isCollapse,
            handleOpen,
            handleClose,
            changeLanguage,
            t,
            goto,
            menus
        }
    },
    methods: {


        handleCollapse() {
            this.isCollapse = !this.isCollapse
        }
    }
})

</script>

<style lang="scss" scoped>

.el-header {
    background-color: azure;

    .logo {
        img {
            width: 100px;
        }
    }

    .title {
        text-align: center;
        font-size: 36px;
    }
}

.el-aside {
    color: var(--el-text-color-primary);
    text-align: center;
    line-height: 200px;
    overflow: hidden;

    &.collapse {
        width: 65px;

        transition: all 0.3s;

        .handler {
            left: 60px;
            transition: all 0.3s;
        }
    }

    &:not(.collapse) {
        width: 200px;
        transition: all 0.5s linear 0s;

        .handler {
            left: 195px;
            transition: all 0.5s linear 0s;
        }

    }

    .handler {
        position: absolute;
        top: 50%;
    }


}


.el-main.content {
    background-color: antiquewhite;
    color: var(--el-text-color-primary);
}

</style>